<template>
  <div id="chart_weight">

  </div>

</template>

<script>
  import *as echarts from 'echarts'
  let myChart;
  let option;
  /*  let xDataArr=['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
    let yDataArr=[995, 666, 444, 858, 654, 236, 645, 546, 846, 225, 547, 356];*/
/*  let xDataArr = [];
  let yDataArr = [];*/
  export default {
    name: 'WeightAnalysis',
    data() {
      return {
        xDataArr:[],
        yDataArr:[],
      }
    },
    created() {
    //  this.getWeightDataList();
    },
    methods: {
      getWeightDataList(){
        this.axios.get('micro-sports-server/weight/allAvgWeight',{
          params:{

          }
        }).then(res => {

         /* let ress = JSON.parse(JSON.stringify(res));
          console.log(ress);
          console.log(ress.data);
            let arr = new Array(ress.data.data.length);
            arr = ress.data.data;
            console.log(arr);
            let arr1 = new Array(arr.length);
            let arr2 = new Array(arr.length);
            for(let i=0;i<arr.length;i++){
              arr[i].value.avgWeight=arr1[i];
              arr[i].value.ageType=arr2[i];
            }
            console.log(arr1);
            console.log(arr2);
            this.xDataArr=arr1;
            this.yDataArr=arr2;*/
          let arr = res.data.data;
          let arr1 = new Array(arr.length);
          let arr2 = new Array(arr.length);
          arr.forEach(function(value,index){
            arr1[index]=value.ageType;
         //   this.xDataArr.push(value.ageType);
            arr2[index]=value.avgWeight;
          });
          console.log(arr1);
          console.log(arr2);
         this.xDataArr=arr2;
         this.yDataArr=arr1;
       //   xDataArr.push(arr2);
       //   yDataArr.push(arr1);
        });
   /*     this.init();*/
      },
    },
    mounted() {
     // this.getWeightDataList();
      let this_ = this;
      //   let echartData3=['2月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
       myChart = echarts.init(document.getElementById('chart_weight'));
       option = {
        title: {
          text: '各年龄段平均体重',
          textStyle: {
            fontSize: 20,
            color: ['#6d6d6d'],
            fontWeight: 'normal'
          },
        },
        color: ['#2588ff'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: [
          {
            type: 'category',
            data: this.xDataArr,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '体重（公斤）',
            type: 'bar',
            barWidth: '60%',
            data: this.yDataArr
          }
        ]
      };
      myChart.setOption(option);
    },
    //数据自动刷新，必然需要一个监听机制告诉Echarts重新设置数据
    watch: {
      //观察option的变化
      option: {
        handler(newVal, oldVal) {
          console.log('oldVal:', oldVal);
          console.log('newVal:', newVal);
          if (this.myChart) {
            if (newVal) {
              this.myChart.setOption(newVal,true);
            } else {
              this.myChart.setOption(oldVal,true);
            }
          } else {
            this.init();
          }
          this.myChart.resize();
        },
        deep: true //对象内部属性的监听，关键。
      }
    },
  }
</script>

<style scoped>

  #chart_weight{
    width: 50%;
    height: 500px;
    border: 1px solid blanchedalmond;
    margin-left: 20px;
  }

</style>
